<template>
<view class="creat-order-box padding-tb">
  <view class="create-order-main padding-lr">
    <!-- 收货地址 -->
    <view class="address-box cu-list menu">
      <view class="cu-item arrow" v-if="hasAddress" @tap="gotoAddressPage">
        <view class="content padding-tb-sm">
          <view class="text-gray text-df">
            <text class="cu-tag sm bg-orange radius margin-right-xs" v-if="curAddress.isdefault === 1">默认</text>
            {{ curAddress.province }}-{{ curAddress.city }}-{{ curAddress.area }}
          </view>
          <view class="margin-top-sm text-black text-xl">
            {{ curAddress.address }}
          </view>
          <view class="margin-top-xs text-black text-xl">
            {{ curAddress.truename }}  {{ curAddress.pri_phone }}
          </view>
        </view>
      </view>

      <view class="cu-item arrow" v-if="!hasAddress" @tap="gotoAddressPage">
        <view class="content">
          请先添加收货地址
        </view>
      </view>
    </view>
    <!-- 订单信息 -->
    <view class="order-content margin-top padding bg-white text-black">
      <view class="product-info-box flex justify-between">
        <lazy-img :src="BASE_URL + productImg" mode="widthFix" width="160rpx" height="160rpx"></lazy-img>
        <view class="product-info">
          <view class="label text-cut-2 text-df">{{productInfo.title}}</view>
          <view class="desc padding-xs margin-top-xs bg-gray text-sm text-cut-2">{{productAttrLabel}}</view>
        </view>
        <view class="order-info text-right">
          <view class="product-price text-price text-orange">{{ productPriceLabel }}</view>
          <view class="product-amount text-gray margin-top-sm">x {{amount}}</view>
        </view>
      </view>

      <form>
        <!-- <view class="cu-form-group margin-top">
          <view class="title">配送方式 <text class="margin-left text-gray">普通配送</text></view>
          <picker @change="PickerChange" :value="index" :range="picker">
            <view class="picker">
              {{index>-1?picker[index]:' '}}
            </view>
          </picker>
        </view> -->

        <view class="cu-form-group align-start">
          <view class="title">订单备注</view>
          <textarea :maxlength="128" @input="remarkInput" placeholder="选填, 请先和商家协商一致"></textarea>
        </view>
      </form>

      <view class="order-summary flex justify-end text-df">
        <view class="text-gray text-df">共{{amount}}件</view>
        <view class="margin-left">小计<text class="product-price margin-left-xs text-price text-orange text-df">{{productPriceLabel}}</text></view>
      </view>
    </view>
  </view>

  <view class="order-actions bg-white padding-lr flex align-center justify-end">
    <view class="order-summary flex justify-end text-df">
      <view class="text-gray text-df">共{{amount}}件</view>
      <view class="margin-left">合计<text class="product-price margin-left-xs text-price text-orange text-df">{{productPriceLabel}}</text></view>
    </view>
    <button class="cu-btn round bg-orange margin-tb-sm margin-left lg" @tap="submitOrder">提交订单</button>
  </view>

  <!-- 付款模态框 -->
  <view id="payment-modal" class="cu-modal bottom-modal" :class="ifShowPaymentModal ? 'show' : ''">
    <view class="cu-dialog bg-white padding">

      <view class="close">
        <text class="cuIcon-close text-black" @tap="hidePaymentModal"></text>
      </view>

      <view class="cu-list menu margin-tb padding-top">
        <view class="cu-item arrow" @tap="changePayment('bank')">
          <view class="content">
            <text :class="payment === 'bank' ? 'cuIcon-radiobox text-orange' : 'cuIcon-round'"></text>
            <text>银行卡支付</text>
            <view class="text-gray text-sm">由恐龙租机提供支付服务</view>
          </view>
        </view>
        <view class="cu-item" @tap="changePayment('weixin')">
          <view class="content">
            <text :class="payment === 'weixin' ? 'cuIcon-radiobox text-orange' : 'cuIcon-round'"></text>
            <image src="/static/weixin.png" class="png" mode="aspectFit"></image>
            <text>微信支付</text>
          </view>
        </view>
        <view class="cu-item border-bottom" @tap="changePayment('ali')">
          <view class="content">
            <text :class="payment === 'ali' ? 'cuIcon-radiobox text-orange' : 'cuIcon-round'"></text>
            <image src="/static/ali.png" class="png" mode="aspectFit"></image>
            <text>支付宝</text>
          </view>
        </view>
      </view>

      <view class="footer flex flex-direction align-center margin-top">
        <view class="text-xl">
          支付<text class="text-orange text-price margin-left">{{productPriceLabel}}</text>
        </view>
        <button class="cu-btn dm-btn round bg-orange margin-tb-sm payment-btn text-lg" @tap="onPay">去付款</button>
      </view>
    </view>
  </view>

  <!-- 下单提示模态框 -->
  <view class="cu-modal" :class="ifShowTipsModal ? 'show':''">
    <view class="cu-dialog">
      <view class="cu-bar bg-white justify-end">
        <view class="content">下单成功!</view>
        <!-- <view class="action" @tap="hideTipsModal">
          <text class="cuIcon-close text-red"></text>
        </view> -->
      </view>
      <view class="padding-xl">
        {{tips}}
      </view>
      <view class="cu-bar bg-white">
        <view class="action margin-0 flex-sub text-orange" @tap="gotoOrderListPage">
          <text class="cuIcon-form"></text>查看订单
        </view>
        <view class="action margin-0 flex-sub solid-left" @tap="gotoUserPage">返回首页</view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'create-order', // 确认订单
  data () {
    return {
      ifShowPaymentModal: false,
      ifShowTipsModal: false,
      tips: '',
      orderId: '',
      curAddress: null,
      index: 0,
      picker: ['快递 免邮'],
      remark: '',
      payment: 'bank',
      addressList: []
    }
  },
  computed: {
    ...mapGetters([
      'BASE_URL',
      'RETUNIT_LIST',
      'productInfo',
      'orderParams',
      'orderAddress'
    ]),
    productAttrLabel() {
      let target = ''
      const specsArr = JSON.parse(this.orderParams.specs_value)
      specsArr.forEach(item => {
        target += `${item.attr_name}:${item.attr_value};`
      })
      return target
    },
    productPriceLabel() {
      return `${this.productInfo.avg_price}/${this.RETUNIT_LIST[this.productInfo.rentunit]}`
    },
    productImg() {
      return this.productInfo.image_logo
    },
    amount() {
      return this.orderParams.number
    },
    hasAddress() {
      return this.curAddress && this.addressList.length !== 0
    },
    defaultAddress() {
      let target = null
      if (this.addressList.length) {
        target = this.addressList.find(o => o.isdefault === 1) || this.addressList[0]
      }
      return target
    },
    orderRealParams() {
      let params = {
        ...this.orderParams,
        remark: this.remark
      }
      if (this.curAddress) {
        params.address_id = this.curAddress.id
      }
      return params
    }
  },
  async created() {
    this.initOrderFlow()
    await this.getAddressList()
    this.curAddress = this.orderAddress || this.defaultAddress
  },
  methods: {
    getAddressList() {
      return new Promise(resolve => {
        this.$api.getAddressList().then(res => {
          console.log('获取地址', res)
          if (!res) return
          const resData = res.data
          this.addressList = resData.list || []
          resolve()
        })
      })
    },
    /** 进入下单流程 */
    initOrderFlow() {
      this.$store.commit('SET_ORDER_FLOW_STATUS', true)
    },
    PickerChange(e) {
      this.index = e.detail.value
    },
    /** 订单备注输入 */
    remarkInput(e) {
      this.remark = e.detail.value
    },
    async submitOrder() {
      console.log('提交订单', this.orderRealParams)
      await this.createOrder()
      this.showTipsModal()
      // this.$showSuccessToast('提交成功!')
    },
    createOrder() {
      return new Promise(resolve => {
        this.$api.createOrder(this.orderRealParams).then(res => {
          console.log('提交订单', res)
          if (!res) return
          const resData = res.data
          this.tips = res.msg
          // this.orderId = resData.order_id || ''
          resolve()
        })
      })
    },
    gotoAddressPage() {
      this.$Router.push({
        name: 'address-list'
      })
    },
    gotoOrderListPage() {
      this.$Router.push({
        name: 'order-list',
        params: { status: '' }
      })
    },
    gotoUserPage() {
      this.$Router.pushTab({
        name: 'user'
      })
    },
    showTipsModal() {
      this.ifShowTipsModal = true
    },
    hideTipsModal() {
      this.ifShowTipsModal = false
    },
    showPaymentModal() {
      this.ifShowPaymentModal = true
    },
    hidePaymentModal() {
      this.ifShowPaymentModal = false
    },
    changePayment(key) {
      this.payment = key
    },
    onPay() {
      console.log('付款')
    }
  }
}
</script>

<style lang="less">
.creat-order-box {
  .order-content {
    min-height: 500rpx;
  }

  .cu-form-group {
    padding: 0;
    border-top: none;

    .title {
      font-size: 14px;
    }
  }

  .order-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120rpx;
  }

}
.address-box,
.order-content {
  border-radius: 20rpx;
}
.product-info {

  &-box {
    height: 180rpx;
    overflow: hidden;
  }
  width: 340rpx;

  .desc {
    height: 84rpx;
    border-radius: 10rpx;
    color: #b4b4b4;
  }
}
.order-info {
  width: 180rpx;
}

/** 付款模态框 Start */
#payment-modal {
  text-align: left;

  .cu-dialog {
    min-height: 10vh;
    border-top-left-radius: 36rpx;
    border-top-right-radius: 36rpx
  }

  .close {
    position: absolute;
    top: 30rpx;
    left: 30rpx;
    font-size: 16px;
  }
  .payment-btn {
    width: 100%;
    font-size: 18px;
  }
}

/** 付款模态框 End */
</style>
